<template>
  <div class="home_div" >

    <div style="background-image: url('assets/title.png')">


    </div>

    <div class="left-box" style="position:absolute;z-index:2">222</div>

    <div class="right-box" style="position:absolute;z-index:2">333</div>

    <div style="position:absolute;z-index:1;visibility:visible;" id="container"></div>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader"
import {shallowRef} from '@vue/reactivity'

export default {
  name: "mapcomtaint",
  setup() {
    const map = shallowRef(null);
    return {
      map,
    }

  },
  create() {

  },
  methods: {
    ininMap() {
      AMapLoader.load({
        key: 'dc9795df105fd76f649c50bd4b54f22f',  //设置您的key
        version: "2.0",
        plugins: ['AMap.ToolBar', 'AMap.Driving'],
        AMapUI: {
          version: "1.1",
          plugins: [],

        },
        Loca: {
          version: "2.0.0"
        },
      }).then((AMap) => {
        this.map = new AMap.Map("container", {
          mapStyle: 'amap://styles/darkblue',//设置地图的显示样式
          pitch: 45,
          viewMode: "3D",
          terrain: true, // 开启地形图
          zoom: 18,
          zooms: [2, 22],
          center: [108.96, 34.22],
        });
        let positionArr = [
          // [113.357224,34.977186],
          // [114.555528,37.727903],
          // [112.106257,36.962733],
          // [109.830097,31.859027],
          // [116.449181,39.98614],
        ];
        for (let item of positionArr) {
          let marker = new AMap.Marker({
            position: [item[0], item[1]],
          });
          this.map.add(marker);
        }


      }).catch(e => {
        console.log(e);
      })
    },
    addMarker() {

    }
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.ininMap();
  }
}
</script>
<style scope>
.home_div {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
}

#container {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}




</style>